<div class="dateSelector" (clickOutside)="yearOpen=false;monthOpen=false;dayOpen=false;">
    <p class="box" (click)="boxClick()" [ngClass]="{'open':(yearOpen&&!showHint&&!disabled),'error':showHint,'selected':((selectedYear>0&&selectedMonth>0&&selectedDay>0)&&!disabled),'disabled':disabled}">{{getVal()}}</p>
    <p class="hint" *ngIf="showHint">{{hint}}</p>
    <div class="checkbox" *ngIf="!showHint&&toNow">
        <div class="check" (click)="checkClick()" [ngClass]="{'choose':disabled}"></div>
        <p class="word">{{defaultCheckboxValue}}</p>
    </div>
    <div class="date">
        <div class="year" *ngIf="yearOpen" (mouseenter)="yearEnter()">
            <p class="yearItem" *ngFor="let yearItem of year;let i = index;" [ngClass]="{'selected':yearClass(yearItem)}" (click)="yearClick(yearItem,$event)" (mouseenter)="mouseEnterProxy('year',yearItem,$event)" (mouseleave)="clearTimer()">{{yearItem}}</p>
        </div>
        <div class="month" *ngIf="monthOpen" (mouseenter)="monthEnter()" [ngStyle]="{'top':yearOffsetTop}">
            <p class="monthItem" *ngFor="let monthItem of month;let j = index;" [ngClass]="{'selected':monthClass(monthItem)}" (click)="monthClick(monthItem,$event)" (mouseenter)="mouseEnterProxy('month',monthItem,$event)" (mouseleave)="clearTimer()">{{monthItem}}</p>
        </div>
        <div class="calendar" *ngIf="dayOpen" [ngStyle]="{'top':monthOffsetTop}">
            <div class="week">
                <p class="weekItem" *ngFor="let weekItem of week;let k = index;">{{weekItem}}</p>
            </div>
            <div class="day">
                <p class="dayItem" *ngFor="let dayItem of day;let m = index;" [ngClass]="{'selected':dayClass(dayItem),'ok':dayItem.canSelect,'other':!dayItem.canSelect}" (click)="dayClick(dayItem)">{{dayItem.dayNumber}}</p>
            </div>
        </div>
    </div>
</div>